<template>
    <div>
  <table class="table">
            <tbody>
                <tr>
                    <th>编号</th>
                    <th>用户名称</th>
                </tr>
                <tr v-for="info in data.linq" :key="info.id">
                    <td>{{info.id}}</td>
                    <td>{{info.name}}</td>
                </tr>
            </tbody>
            <div>
             当前<b>{{fom.pageindex}}</b>页
             每页 <b>{{fom.pagesize}}</b>条
             共<b>{{fom.pageindex}}</b>/ <b>{{data.page}}</b>页
             <input type="button" value="首页" @click="gopage(1)">
             <input type="button" value="上一页" @click="gopage(fom.pageindex-1)">
             <span v-for="im in data.page" @click="gopage(im)">&emsp;{{im}}&emsp;</span><!-- 动态获取跳转页码 -->
             <input type="button" value="下一页" @click="gopage(fom.pageindex+1)">
             <input type="button" value="尾页" @click="gopage(data.page)">
             <input type="number" v-model="fom.pageindex">
             <input type="button" value="跳转" @click="gopage(fom.pageindex)">
             <select v-model="fom.pagesize" @change="show">
                <option value="">请选择</option>
                <option v-for="im in arr" :value="im">每页{{im}}条</option>
             </select>
            </div>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted,reactive } from 'vue';
import { useRoute,useRouter } from 'vue-router';
// 分页查询参数（响应式）
const fom:any=reactive({
    pageindex:1,
    pagesize:3
})
// 接口返回数据（响应式）
const data:any=reactive({
    linq:[],
    count:0,
    page:0
})
// 跳转页码方法
const gopage=(num:any)=>{
    if(num<1)// 页码小于1时重置为1
{
    fom.pageindex=1;
    return;
}
if(num>data.page) // 页码超过总页数时，跳转到尾页
{
    fom.pageindex=data.page;
    return;
}
fom.pageindex=num;// 正常跳转页码
getlist();
}
// 切换每页条数时，重置页码为1并重新查询
const show=()=>{
    fom.pageindex=1;
    getlist();
}
onMounted(()=>{
 getlist();   
})
const arr:any=ref([2,3,4,6])
// 调用接口获取数据
const getlist=()=>{
    axios.get('https://localhost:7145/api/Emp/Show',{params:fom}).then(res=>{
        Object.assign(data,res.data);
    })
}
</script>

<style scoped>

</style>